<template>
	<view>
		<view class="search-wrap">
			<u-search v-model="keyword" :placeholder="placeholder" :show-action="false" @focus="seach"></u-search>
		</view>

		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :style="{ width: width, height: height }" id="txMap" class="map-wrap" :scale="scale"
					:latitude="latitude" :longitude="longitude" :markers="markers" :circles="circles"
					:show-location="true" :show-scale="showscale" @markertap="markertap" @callouttap="callouttap"></map>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "TxMap",
		props: {
			markers: {
				type: Array
			},
			circles: {
				type: Array
			},
			placeholder: {
				type: String,
				default: '请输入地点名称'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100vh'
			}
		},
		data() {
			return {
				openLocation: false, //开启地图服务
				keyword: '',
				scale: 16,
				latitude: '24.624166',
				longitude: '118.087476',
				showscale: true,
				txMap: undefined,
				searchList: []
			};
		},
		created() {
			//#ifdef MP-WEIXIN
			this.setAuthorize()
			this.getSetting()
			//#endif 
			// this.openLocation = true
			// this.getLocation()
			// this.txMap = uni.createMapContext('txMap')

		},
		methods: {
			setAuthorize() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						this.openLocation = true
					},
					fail: (err) => {
						this.openLocation = false
						this.openSetting()
						uni.showToast({
							title: '授权失败',
							icon: 'none'
						})

					}
				})
			},
			// 获取用户的当前设置
			getSetting() {
				uni.getSetting({
					success: (res) => {
						if (res.authSetting["scope.userLocation"]) {
							this.openLocation = true
							this.getLocation()
						} else {
							this.openSetting()
						}
					},
				})
			},
			openSetting() {
				//调起客户端小程序设置界面，返回用户设置的操作结果
				uni.openSetting({
					success: (res) => {
						if (res.authSetting["scope.userLocation"]) {
							this.openLocation = true
							this.getLocation()
						}
					},
					fail: () => {
						this.openLocation = false;
						uni.showToast({
							title: '设置失败',
							icon: 'none',
							duration: 3000
						})
					}
				})
			},

			getLocation() {
				if (this.openLocation) {
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						success: (res) => {
							this.latitude = res.latitude;
							this.longitude = res.longitude;
						},
						fail: (res) => {
							uni.showModal({
								content: '获取位置失败',
								showCancel: false
							})
						}
					});
				}

			},

			setCenterLocation() {
				this.txMap = uni.createMapContext('txMap', this)
				this.txMap.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: (res) => {
						console.log(res);
					}
				})
			},

			seach() {
				uni.chooseLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					keyword: this.keyword,
					success: (res) => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.setCenterLocation()
					}
				})
			},
			markertap(e) {
				this.$emit('markertap', e.detail.markerId)
			},
			callouttap(e) {
				this.$emit('markertap', e.detail.markerId)
			},


		}
	}
</script>

<style lang="scss">
	.search-wrap {
		margin-bottom: 20rpx;
		flex: 1;
	}

	.map-wrap {
		height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
		width: 100%;
	}
</style>